<template>
  <view >
    <u-navbar
        :autoBack="true"
        title="余额"
        :placeholder="true"
        :bgColor="background"></u-navbar>
    <view class="blance">
      <view class="blance-num flex-box">
        <view class="box-1">
          <view class="">
            余额
          </view>
          <view class="num">
            {{info.balance || 0.00}}
          </view>
          <text class="num-btn" @tap="goNextPage()">去提现</text>
        </view>
        <view class="box-1">
          <view class="">
            星豆
          </view>
          <view class="num">
            {{info.points || 0.00}}
          </view>
          <text class="num-btn exchange-btn" @tap="exchangeFun()">立即兑换</text>
        </view>
      </view>
      <view class="content">
        <view class="title flex-box">
          <view class="b1 box-1" @click="navClick(0)" :class="{'action':tab==0}">全部</view>
          <view class="b1 box-1" @click="navClick(1)" :class="{'action':tab==1}">转入</view>
          <view class="b1 box-1" @click="navClick(2)" :class="{'action':tab==2}">转出</view>
        </view>
        <view class="li flex-box" v-for="(item,index) in list" :key="item.id" v-if="list.length">
          <view class="left box-1">
            <view class="td" style="display: flex;align-items: center">
              {{item.descr}}
              <view style="margin-left: 20rpx;" class="right" v-if="item.amount.indexOf('-')>=0">{{item.amount}}</view>
              <view style="margin-left: 20rpx;" class="right add" v-else>+{{item.amount}}</view>
            </view>
            <view class="time">{{item.create_time}}</view>
          </view>
          <view class="right">
            <view style="font-size: 26rpx" v-if="item.withdraw_status_text">{{ item.withdraw_status_text }}</view>
            <view class="confirm-btns" @tap="tixianyanzheng(item.withdraw_id)" v-if="(item.withdraw_status==2 || item.withdraw_status==3) && item.type==='withdraw'">立即验证</view>
<!--            -->
          </view>

        </view>
        <view v-if="!list.length">
          <u-empty text="暂无数据" mode="data"></u-empty>
        </view>
      </view>
    </view>
    <u-transition class="mask" mode="fade" :show="exchange_show">
      <view class="exchange-popup">
        <view class="flex-box popup-title">
          <view class="box-1">
            <view class="title flex-box">
              <!-- 星豆兑换余额 -->
              <view :class="[modeTab==1?'sign-active':'','sign']" @click="selectMode(1)">兑换余额</view>
              <view :class="[modeTab==2?'sign-active':'','sign']" @click="selectMode(2)">兑换星豆</view>
            </view>
            <view class="num" v-if="modeTab==1">
              星豆数量：{{info.points || 0.00}}
            </view>
            <view class="num" v-if="modeTab==2">
              余额：{{info.balance || 0.00}}
            </view>
          </view>
          <u-icon size="28" name="close-circle" color="#000" @tap="exchangeFun()"></u-icon>
        </view>
        <view class="input-num flex-box">
          <image class="ico" :src="modeTab==1?'../../../static/img/bean.png':'../../../static/img/balance.png'"></image>
          <input type="number" v-model.number="exchangeNum" class="box-1" placeholder="请输入兑换数量" @input="amountFun"/>
        </view>
        <view class="tips">
          余额星豆互转比例为1:1，兑换数量需为100的整倍数
        </view>
        <view class="exchange-btn" @click="exchangePoints()">
          立即兑换
        </view>

      </view>
    </u-transition>
    <u-popup :show="iframeShow" @close="iframeShow= false" :closeable="true" style="height: 60vh">
      <view style="padding: 0 20rpx;">
        <view style="line-height: 100rpx;height: 100rpx;background: #fff;position: relative;z-index: 999999">提现验证</view>

        <iframe @load="iframeLoad" :src="iframeUrl" frameborder="0" style="height: 60vh;width: 100%;margin-top: -100rpx" id="iframe"></iframe>
      </view>
    </u-popup>
  </view>
</template>
<style>
::v-deep .u-popup__content__close--top-right{
  z-index: 99999999999999 !important;
}
</style>
<script>
import debounce from "@/utils/debounce.js"
export default{
  data(){
    return {
      iframeShow:false,
      iframeUrl:null,
      newImgUrl:'',
      tab:0,
      page:1,
      totalPage:1,
      info:{
        points:0.00,
        balance:0.00,
      },
      exchangeNum:'',
      list:[],
      background:"transparent",
      exchange_show:false,
      flag:false,
      modeTab:1,
      win:null
    }
  },
  onShow(){
    this.getData()
  },
  onLoad(){
    this.newImgUrl = this.$c.newImgUrl
    this.initData()

    // console.log(123)
    this.win = window
    // document.querySelector('#iframe').addEventListener('laod',e=>{
    //     console.log(e)
    // })
  },
  onPageScroll(res) {
    if (res.scrollTop > 100) {
      this.background = '#fff'
    } else {
      this.background = 'transparent'
    }
  },
  methods:{
    iframeLoad(e){

      let iframe = document.querySelector('#iframe')
      // this.win.console.log(125553)
      // this.win.console.log(iframe)
      // console.log(111111111)
      var isClose = (typeof iframe.contentWindow.document !== 'undefined' && (iframe.contentWindow.document.URL.indexOf('close')  > -1) )
      // console.log(222222222)
      // console.log(isClose,456)
      this.iframeShow = !isClose
      this.getData()
      // isClose && (this.iframeShow = false)
    },
    selectMode(val){
      this.modeTab = val
      this.exchangeNum = ''
    },
    initData(){
      uni.showLoading()
      this.$u.api.withdrawLoadAccount()
          .then(res=>{
            uni.hideLoading()
            if(res.status){
              this.info = res.msg
            }
          })
          .catch(err=>{
            uni.hideLoading()
          })
    },
    //输入金额方法
    amountFun: debounce.debounce(function(e) {
      console.log(this.modeTab)
      if (this.modeTab ==1 && (parseFloat(e.detail.value) > this.info.points)) {
        this.$nextTick(() => {
          this.exchangeNum = this.info.points
        })
        return
      }
      if (this.modeTab ==2 && (parseFloat(e.detail.value) > this.info.balance)) {
        this.$nextTick(() => {
          this.exchangeNum = this.info.balance
        })
        return
      }
      if (parseFloat(e.detail.value) < 0) {
        this.$nextTick(() => {
          this.exchangeNum = 1
        })
      }
    }, 600),
    //星豆余额互转
    exchangePoints(){
      if(this.flag){
        this.$u.toast('请勿重复操作！')
        return
      }
      if(!this.exchangeNum){
        this.$u.toast('请输入兑换数量')
        return
      }
      this.$u.api.pointBalance({
        amount:this.exchangeNum,
        type:this.modeTab
      })
          .then(res=>{
            this.$u.toast(res.msg)
            if(res.code==200){
              this.initData()
              this.exchangeFun()
              this.getData()
            }
          })
    },
    exchangeFun(){
      this.exchange_show = !this.exchange_show
    },
    goNextPage(){
      uni.navigateTo({
        url:'./withdrawal'
      })
    },
    navClick(index){
      this.list = []
      this.tab = index
      this.page = 1
      this.getData()
    },
    getData(){
      let data = {
        tab:this.tab,
        page:this.page
      }
      this.$u.api.balanceRecord(data).then(res=>{
        if(res.code == 200){
          this.totalPage = res.msg.totalPage
          if(this.page == 1){
            this.list = res.msg.list
          }else{
            this.list = this.list.concat(res.msg.list)
          }
        }
      })
    },
    tixianyanzheng(id){
      this.$u.api.tixanyz({id:id}).then(res=>{
        if(res.code == 200){
          // this.iframeUrl = res.data.pwd_url
          this.iframeUrl = res.data.pwd_url
          this.iframeShow = true
        }else{
          this.$u.toast(res.msg)
        }
      })
    },
  },
  onReachBottom() {
    let _this = this
    if (this.page < this.totalPage) {
      this.page++
      setTimeout(() => {
        _this.getData()
      }, 1000)
    }
  },
}
</script>

<style lang="scss">

.mask{
  background: rgba(0,0,0,0.6);
  position: fixed;
  bottom:0;
  right:0;
  left:0;
  top:0;
  z-index:10;
}
page{
  background: linear-gradient(rgba(255,223,224,1) 0%, rgba(255,223,224,0.38) 20%, #F6F7FB 35%,#F6F7FB 100%);
  font-size:32rpx;
  color:#666666;
}
.blance{
  padding:30rpx;
  text-align: center;
  font-size:28rpx;
  .blance-num{
    color:#fff;
    border-radius: 30rpx;
    padding:40rpx 0;
    text-align: center;
    background:linear-gradient(90deg,#D32B2F,#EA686B,#FE9DA0);
    .num{
      font-weight: bolder;
      font-size:48rpx;
      margin:10rpx 0;
    }
    .num-btn{
      display: inline-block;
      border-radius: 40rpx;
      background:#fff;
      color:#D02227;
      padding:4rpx 30rpx;
      text-align: center;
      min-width: 120rpx;
    }
    .exchange-btn{
      background: transparent;
      border:1px solid #fff;
      color:#fff;
    }
  }
  .contetnt{
    color:#333;
  }
}

.content{
  background-color: #fff;
  width:700rpx;
  min-height:500rpx;
  border-radius: 20rpx;
  margin:0 auto;
  margin-top:30rpx;
  .title{
    padding:30rpx;
    text-align: center;
    border-bottom:1rpx solid #eee;
    .action{
      color:#D02227;
      font-weight: bold;
    }
  }
  .li{
    padding:30rpx;
    border-bottom:1rpx solid #eee;
    .left{
      text-align: left;
      .td{
        font-size:28rpx;
        font-weight: bolder;
      }
      .time{
        font-size:24rpx;
        color:#888;
        margin-top:10rpx;
      }
    }
    .right{
      font-size:35rpx;
      color:#353535;
    }
    .add{
      color:$base !important;
    }
  }
}
.exchange-popup{
  position: fixed;
  bottom:0;
  right:0;
  left:0;
  z-index:10;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding:40rpx;
  font-size:26rpx;
  color:#888888;
  .popup-title{
    align-items: flex-start;
    .title{
      font-size:32rpx;
      color:#000;
      margin-bottom:10rpx;
    }
    .sign-active{
      color:$base;
      font-size:36rpx;
      &::after{
        background:$base !important;
      }
    }
    .sign{
      margin-right:20rpx;
      display: inline-block;
      text-align: center;
      &::after{
        display: inline-block;
        content:'';
        transform: translateY(-10rpx);
        width: 50%;
        height: 2rpx;
        background: transparent;
      }
    }
  }
  .input-num{
    background-color:#F6F7FB ;
    border-radius: 20rpx;
    padding:20rpx;
    margin-top: 40rpx;
    .ico{
      display: block;
      width: 44rpx;
      height: 45rpx;
      margin-right:20rpx;
    }
  }
  .tips{
    text-align: center;
    padding:20rpx 0;
  }
  .exchange-btn{
    color:#fff;
    display: block;
    width: 600rpx;
    margin:0 auto;
    text-align: center;
    border-radius: 40rpx;
    line-height: 80rpx;
    margin-top:108rpx;
    background: #D02227;
  }
}
.confirm-btns {
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background:#D02227;
  border-radius: 30rpx;
  font-size: 24rpx;
  padding: 0 20rpx;
  margin-top: 5rpx;
}
</style>